<template>
	<view>
		<view class="center column">
      <!-- widthFix 高度自动变化 -->
			<!-- logo图片，使用widthFix模式保持宽高比 -->
			<image class="logo" src="/static/images/logo-black.png" lazy-load mode="widthFix"></image>
			<text class="version">Version 1.0.0</text>
		</view>

		<view class="center-content">
			<p>知行峰是专注于在线教育平台，聚合了优秀教师的海量精品课程。在这里，您可以在线观看视频教程；您可以随时随地向名师请教；您可以与大量志同道合的同学进行交流。</p>
			<p>打破地域的限制，让每个立志学习，有梦想的人，都能接受优秀教师的指导和教学；同时希望给优秀的教师一个展示的平台。</p>
			<p>知行峰——陪你学习，伴你梦想！</p>
		</view>
		<view class="bottom">
			Copyright &copy; 2025 baidu.com All rights reserved
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		methods: {
		}
	}
</script>

<style lang="scss">
	// 页面样式
	page {
		background-color: $mxg-color-grey; // 背景色
	}

	// logo样式
	.logo {
		width: 280rpx;        // 宽度
		margin-top: 60rpx;    // 上外边距
		margin-bottom: 20rpx; // 下外边距
	}

	// 版本号样式
	.version {
		font-size: 30rpx;     // 字体大小
		color: $mxg-color-primary; // 字体颜色
		font-weight: 500;     // 字体粗细
	}

	// 中心内容区域样式
	.center-content {
		font-size: 30rpx;     // 字体大小
		color: $mxg-text-color-black; // 字体颜色
		margin-top: 50rpx;    // 上外边距
		padding: 0 30rpx;     // 左右内边距
		p {
			text-indent: 2em;   // 首行缩进
			margin-bottom: 20rpx; // 下外边距
		}
	}

	// 底部样式
	.bottom {
		position: absolute;   // 绝对定位
		left: 0;              // 左边距离
		right: 0;             // 右边距离
		bottom: 20rpx;        // 底部距离
		font-size: 20rpx;     // 字体大小
		color: $mxg-text-color-grey; // 字体颜色
		text-align: center;   // 文本居中
	}
</style>
